﻿/// <reference path="../_references.js" />
/// <reference path="../knockout.mapping-latest.debug.js" />

$(function () {
    //$("#expenseToAddDatepicker").datepicker();
    //$("#expenseToEditDatepicker").datepicker({ dateFormat: "dd/mm/yy" });
    //$("#expenseToAddDatepicker").datepicker({ dateFormat: "dd/mm/yy" });
    $("#expenseToEditDatepicker").datepicker();
    $("#expenseToAddDatepicker").datepicker();
});

var viewModel;
var viewModelJs;

$(function () {
    var viewModelJs;

    $.getJSON("api/Expenses", initializeData);

});

function initializeData(data) {
    // On success, 'data' contains a list of products.
    viewModelJs = data;

    viewModel = generateViewModel(viewModelJs);

    //Display errors validation
    viewModel.errors = ko.validation.group(viewModel, { deep: true });
    ko.applyBindings(viewModel);
    $('#loadingContainer').hide();
    $('#expensesContainer').slideDown(700);
}

function refreshViewModel(viewModel) {
    $.getJSON("api/Expenses", function (data) {
        ko.mapping.fromJS(data, viewModel);
    });
}

//function refreshTitlesRecap(viewModel) {
//    $.getJSON("api/TitlesRecap", function (data) {
//        ko.mapping.fromJS(data, viewModel);
//    });
//}

function putUpdateExpense(expense, viewModel) {
    viewModel.expenseToEdit.cost(viewModel.expenseToEdit.cost().replace(",", "."));
    var expenseJSON = ko.toJSON(viewModel.expenseToEdit);
    $.ajax({
        url: "api/Expenses/" + viewModel.expenseToEdit.expenseRecordId(),
        type: 'PUT',
        data: expenseJSON,
        contentType: "application/json;charset=utf-8",
        success: function (data) {
            //$.getJSON("api/Expenses", initializeData);
            //TODO: Vedere http://knockoutjs.com/documentation/plugins-mapping.html
            refreshViewModel(viewModel);
            clearExpense(viewModel.expenseToEdit);

        },
        error: function () {
            alert("The submitted expense cannot be edited. Try to check your data...");
        }
    });
}



function postExpense(expense, viewModel) {
    viewModel.expenseToAdd.cost(viewModel.expenseToAdd.cost().replace(",", "."));
    var expenseJSON = ko.toJSON(viewModel.expenseToAdd);
    
        $.ajax({
            url: "api/Expenses",
            type: 'POST',
            data: expenseJSON,
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                viewModel.expenses.push(
                    ko.mapping.fromJS(data)
                );
                clearExpense(viewModel.expenseToAdd);
                refreshViewModel(viewModel);
            },
            error: function () {
                alert("The submitted expense cannot be added. Try to check your data...");
            }
        });
}


function deleteExpense(expense, viewModel) {
    $.ajax({
        url: "api/Expenses/" + expense.expenseRecordId(),
        type: 'DELETE',
        contentType: "application/json;charset=utf-8",
        success: function (data) {
            viewModel.expenses.remove(expense);
            refreshViewModel(viewModel);
            clearExpense(viewModel.expenseToEdit);
        },
        error: function () {
            alert("The selected expense cannot be deleted. Try to check your data...");
        }
    });
}

function clearExpense(expense) {
    expense.title("");
    expense.description("");
    expense.cost("");
    expense.date("");
    if (expense.expenseRecordId != undefined) expense.expenseRecordId("");

}